<template>
  <div class="forgot_index">
    <!-- <Header></Header> -->
    <div class="content inner">
      <div class="login-box">
        <div class="hd">
          <h3 class="title">密码找回</h3>
          <div class="login-hd-fr">
            已获取，<router-link :to="{ path: '/zmkm' }">马上登录</router-link>
          </div>
        </div>
        <div class="bd fn-clearfix">
          <div class="login-retrieve">
            <div class="login">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                class="demo-ruleForm"
              >
                <el-form-item prop="idno">
                  <el-input
                    v-model="ruleForm.idno"
                    placeholder="请输入身份证号 / 证件号"
                  >
                    <i slot="prefix" class="el-input__icon">
                      <img
                        :src="require('../assets/images/icon_yh.png')"
                        alt=""
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="请输入手机号">
                    <i slot="prefix" class="el-input__icon icon_sj">
                      <img
                        :src="require('../assets/images/icon_sj.png')"
                        alt=""
                        width="18"
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-col :span="15">
                    <el-input
                      v-model="ruleForm.code"
                      placeholder="请输入验证码"
                      @keyup.native.enter="submitForm('ruleForm')"
                      style="margin-right: 14px"
                    >
                      <i slot="prefix" class="el-input__icon icon_code">
                        <img
                          :src="require('../assets/images/icon_yzm.png')"
                          alt=""
                        />
                      </i>
                    </el-input>
                  </el-col>
                  <el-col :span="9" style="height: 42px">
                    <div class="img-verify">
                      <img :src="verifyUrl" alt="" @click="refreshCode" />
                    </div>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="submitForm('ruleForm')"
                    type="primary"
                    style="width: 100%"
                    >确认找回</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <div class="login_notice">
              【密码】会以短信的形式发至预留手机号！
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import localDb from "../utils/localDb.js";
import fetches from "../utils/request";
const { defaultHost } = fetches;
import { getSysZt, getPassword, getDelayPassword } from "../utils/api";
export default {
  name: "Forgot",
  data() {
    return {
      ruleForm: {
        idno: "",
        code: "",
        phone: "",
      },
      rules: {
        idno: [
          {
            required: true,
            message: "请输入身份证号 / 证件号",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      identifyCodes: "", //验证码随机数
      verifyUrl: "", //验证码图片
    };
  },
  methods: {
    refreshCode() {
      const identifyCode = parseInt(Math.random() * 1000, 10);
      this.identifyCodes = identifyCode;
      this.verifyUrl = `${defaultHost}/api/Student/ValidateCode?key=${this.identifyCodes}`;
      console.log(this.identifyCodes);
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const params = {
            idno: this.ruleForm.idno,
            phone: this.ruleForm.phone,
            code: this.ruleForm.code,
          };
          if (this.isDelayApply) {
            try {
              const data = await getDelayPassword(this.identifyCodes, params);
              if (data.res == 0) {
                this.$message({
                  type: "success",
                  message: data.msg,
                });
                setTimeout(() => {
                  this.$router.push({ path: "/zmkm" });
                }, 3000);
              } else {
                this.refreshCode();
                this.$message.error(data.msg);
              }
            } catch (error) {}
          } else {
            try {
              const data = await getPassword(this.identifyCodes, params);
              if (data.res == 0) {
                this.$message({
                  type: "success",
                  message: data.msg,
                });
                setTimeout(() => {
                  this.$router.push({ path: "/zmkm" });
                }, 3000);
              } else {
                this.refreshCode();
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }
        } else {
          this.refreshCode();
          return false;
        }
      });
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  created() {
    this.getSysZt();
  },
  mounted() {
    this.refreshCode();
  },
  computed: {
    isDelayApply() {
      return this.$store.state.isDelayApply;
      // return localDb.get("delayApply");
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.forgot_index {
  min-height: 100vh;
  background: url(~@/assets/images/bg_login.png) no-repeat center/cover;
  background-color: #fff;
  // margin-top: -7px;
}
.inner {
  padding-top: 115px;
  width: 1080px;
}
.content {
  padding-bottom: 0;
  .login-box {
    height: 600px;
    padding: 26px 70px 56px;
    background: #fff;
    border-radius: 10px;
    .hd {
      height: 48px;
      padding-bottom: 23px;
      border-bottom: 2px $bsC solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        // float: left;
        color: $bsC;
        font-size: 24px;
        // font-weight: normal;
        font-family: "MicrosoftYaHei-Bold";
      }
      .login-hd-fr {
        // padding-top: 12px;
        font-size: 16px;
        color: #999;
        a {
          color: $bsC;
          text-decoration: none;
        }
      }
    }
    .bd {
      padding-top: 50px;
      .login-retrieve {
        float: left;
        width: 460px;
        margin-left: 290px;
        .login {
          width: 350px;
          margin: 0 auto;
          .el-input {
            padding-left: 5px;
            /deep/.el-input__inner {
              background-color: unset;
              border-radius: unset;
              border: none;
              border-bottom: 1px solid #e6e6e6;
              padding-left: 47px;
              font-size: 16px;
              &:focus {
                border-bottom: 1px solid #0195ff;
              }
            }
            /deep/ .el-input__prefix {
              left: 17px;
            }
          }
          /deep/ .el-form-item__error {
            padding-left: 52px;
          }
          .el-button {
            background-color: #0195ff;
            border: none;
          }
        }
        .login_notice {
          color: red;
          text-align: center;
          font-size: 14px;
        }
        .img-verify {
          float: right;
          width: 118px;
          height: 38px;
          border: 1px #d2d5d7 solid;
          border-radius: 5px;
          cursor: pointer;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .el-input__icon img {
          margin-top: -4px;
          vertical-align: middle;
        }
        .progressbar-icon {
          position: absolute;
          right: -15px;
          top: 6px;
          z-index: 22;
          width: 27px;
          height: 27px;
          border-width: 1px 1px 0 0;
          border-color: $bsC;
          border-style: solid;
          transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          background: #fff;
        }
      }
    }
  }
}
.el-form-item {
  margin-bottom: 27px;
  &:last-child {
    height: 42px;
    margin-top: 60px;
    margin-bottom: 20px;
    /deep/ .el-form-item__content {
      height: 42px;
      font-size: 16px;
    }
  }
  .el-input__icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    img {
      width: 100%;
      height: 100%;
      margin-top: -4px;
      vertical-align: middle;
    }
  }
  .icon_sj {
    width: 18px;
    height: 25px;
  }
  .icon_code {
    width: 18px;
  }
}
</style>
